<template>
	<div style="background-color: #F4F4F4;min-height: 100vh;color: #1f1f1f;padding-bottom: 6em;">

		<div style="display: flex;padding-top: 1em;">
			<div>
				<image src="/guarantee/static/imgs/toleft.png" @click="toList" style="width: 2em;" mode="widthFix">
				</image>
			</div>
			<div style="text-align: center;font-size: 1.2em;width: calc(100% - 2em);height: 2em;line-height: 1.8em;">
				质保详情</div>
		</div>

		<div class="row" style="margin-top: 1.4em;">
			<div class="inputlable">产品类型</div>
			<div class="inputright">
				<uni-data-checkbox v-model="obj.quTypeId" :localdata="quTypeList" @change="radioChange" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">产品品牌</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="quCaBrandList" range-key="brName" @change="onPickerChange_brand">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.quCaBrandName" placeholder="请输入产品品牌" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">产品型号</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="prModelList" range-key="prBrandName" @change="onPickerChange_model">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.prModel" placeholder="请输入产品型号" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车主姓名</div>
			<div class="inputright">
				<input type="text" v-model="obj.quName" placeholder="请输入车主姓名" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车主电话</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPhone" placeholder="请输入车主电话" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车架号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quVin" placeholder="请输入车架号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车型</div>
			<div class="inputright">
				<input type="text" v-model="obj.quModel" placeholder="请输入车型" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">车牌号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quLicencePlate" placeholder="请输入车牌号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 1.8em;">
			<div class="inputlable">施工门店</div>
			<div class="inputright" style="min-width: calc(100% - 6em);">
				<picker mode="selector" :range="quShopList" range-key="joinName" @change="onPickerChange_shop">
					<div style="display: flex;justify-content: space-between;">
						<div>
							<input type="text" v-model="obj.quShopName" placeholder="请输入施工门店" class="inputText" />
						</div>
						<div>
							<image src="/guarantee/static/imgs/daosanjiao.png" style="height: 2.0em;" mode="heightFix">
							</image>
						</div>
					</div>
				</picker>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="height: 2.5em;">
			<div class="inputlable">施工时间</div>
			<div class="inputright" style="color: #1f1f1f;">
				<uni-dateformat :date="obj.quBuildTime" format="yyyy-MM-dd"></uni-dateformat>
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">贴车价格</div>
			<div class="inputright">
				<input type="text" v-model="obj.quPasteMoney" placeholder="请输入贴车价格(CNY)" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">质保年限</div>
			<div class="inputright">
				<input type="text" v-model="obj.quAgeLimit" placeholder="请输入质保年限" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row" style="margin-top: 0.6em;">
			<div class="inputlable">质保编号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quQualityNum" disabled="true" placeholder="请输入质保编号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div class="row">
			<div class="inputlable">膜筒序列号</div>
			<div class="inputright">
				<input type="text" v-model="obj.quFilmNum" placeholder="请输入膜筒序列号" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<template v-if="obj.quTypeId==102">
			<div class="row">
				<div class="inputlable">前挡质保编号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quFrontNum" placeholder="请输入前挡质保编号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">前挡膜筒序列号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quFrontFilm" placeholder="请输入前挡膜筒序列号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">侧后档质保编号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quSideNum" placeholder="请输入前挡质保编号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
			<div class="row">
				<div class="inputlable">侧后档膜筒序列号</div>
				<div class="inputright">
					<input type="text" v-model="obj.quSideFilm" placeholder="请输入前挡膜筒序列号" class="inputText" />
				</div>
				<div class="clear"></div>
			</div>
		</template>
		<div class="row">
			<div class="inputlable">备注信息</div>
			<div class="inputright">
				<input type="text" v-model="obj.remark" placeholder="请输入备注信息" class="inputText" />
			</div>
			<div class="clear"></div>
		</div>
		<div style="position: relative;margin-top: 0.8em;">
			<div style="position: absolute;left: 1.5em;top: 2em;">施工图片</div>
			<div style="position: absolute; left: 7em;top: 0em;right: 0em;bottom: 0em;">
				<template v-if="obj.quPic">
					<image :src="api.getUrl()+obj.quPic" style="height: 5em;" mode="heightFix"></image>
				</template>

			</div>
		</div>

		<div style="margin-top: 1em;">&nbsp;</div>
	</div>

	<CustomTabbar ref="customTabbar"></CustomTabbar>


</template>

<script setup>
	import {
		onMounted,
		reactive,
		ref
	} from 'vue';
	import api from '@/common/httprequest.js'

	//==============同意用户协议部分==============//
	let agree = ref(0);
	const agreeList = [{
		text: null,
		value: 0
	}];

	const handleChangeAgree = (e) => {
		console.log('e:', e);
		console.log('当前选中的值:', e.detail.value);
		if (e.detail.data.length > 0) {
			agree.value = 1;
		} else {
			agree.value = 0;
		}
	}
	//=============同意用户协议部分==============//

	let obj = ref({});
	// let obj = ref({
	// 	id: null,
	// 	quTypeId: 100, //产品类型id  漆面膜、太阳膜
	// 	quCaBrand: null, //品牌名称id
	// 	quCaBrandName: null, //品牌名称
	// 	prModelId: null, //产品型号id
	// 	prModel: null, //产品型号
	// 	quName: null, //车主姓名
	// 	quPhone: null, //车主电话
	// 	quVin: null, //车架号
	// 	quModel: null, //车型
	// 	quLicencePlate: null, //车牌号
	// 	quShop: null, //施工店名id
	// 	quShopName: null, //施工店名
	// 	quBuildTime: null, //施工时间
	// 	quPasteMoney: null, //贴车价格
	// 	quAgeLimit: null, //质保年限
	// 	quQualityNum: null, //质保编号
	// 	quFilmNum: null, //膜筒序列号
	// 	quFrontNum: null, //前挡质保编号
	// 	quFrontFilm: null, //前挡膜筒序列号
	// 	quSideNum: null, //侧后档质保编号
	// 	quSideFilm: null, //侧后档膜筒序列号
	// 	quPic: null, //施工图片
	// 	creatTime: null, //创建时间
	// 	updateTime: null, //更新时间
	// 	remark: null //备注
	// 	//to_applet: null
	// })

	//产品类型列表
	const quTypeList = [{
			text: '漆面膜',
			value: 100,
		},
		{
			text: '改色膜',
			value: 101,
		},
		{
			text: '太阳膜',
			value: 102,
		}
	];

	let quCaBrandList = reactive([]); //品牌列表
	let prModelList = reactive([]); //产品型号
	let quShopList = reactive([]); //施工门店列表



	import CustomTabbar from '@/component/custom-tabbar.vue'

	//产品类型选中事件
	const radioChange = (e) => {
		//console.log('eeee', e);
		obj.value.quTypeId = e.detail.data.value;
		loadProductModel();
	}

	//品牌选中事件
	const onPickerChange_brand = (e) => {
		const index = e.detail.value;
		//console.log('index-obj', quCaBrandList[index]);
		obj.value.quCaBrand = quCaBrandList[index].id;
		obj.value.quCaBrandName = quCaBrandList[index].brName;
		loadProductModel();
	}

	//产品型号列表选择事件
	const onPickerChange_model = (e) => {
		const index = e.detail.value;
		obj.value.prModelId = prModelList[index].id;
		obj.value.prModel = prModelList[index].prBrandName;
	}

	//施工门店列表选择事件
	const onPickerChange_shop = (e) => {
		const index = e.detail.value;
		obj.value.quShop = quShopList[index].id;
		obj.value.quShopName = quShopList[index].joinName;
		//console.log('index', index);
	}

	const submit = () => {
		if (agree.value == 0) {
			uni.showToast({
				title: '请先同意用户协议,请勾选！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quPhone == null) {
			uni.showToast({
				title: '车主电话不能为空！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quLicencePlate == null) {
			uni.showToast({
				title: '车牌号不能为空！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quShop == null) {
			uni.showToast({
				title: '施工店铺为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.quCaBrand == null) {
			uni.showToast({
				title: '产品品牌为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		if (obj.value.prModelId == null) {
			uni.showToast({
				title: '产品型号为必填项，请选择！',
				icon: 'none',
				duration: 2000
			})
			return;
		}
		console.log('subobj', obj);
		uni.showLoading({
			title: '数据处理中...'
		});
		api.request({
			method: "post",
			url: "/app/guarantee/addguarantee",
			params: obj.value,
		}).then(res => {
			uni.hideLoading();
			console.log('postesaa', res);
			if (res.code == 200 && res.msg == "成功") {
				uni.redirectTo({
					url: '/pages/zhibaoluru/list'
				})
			}
		});

	}


	const loadData = async () => {
		let result = {};
		//第一步：加载品牌列表
		await api.request({
			method: "Get",
			url: "/app/productBrand/list",
			params: {},
		}).then(res => {
			console.log('resaa', res);
			if (res.code == 200) {
				var list = res.data;
				//console.log('list', list);
				if (list.length > 0) {
					Object.assign(result, {
						'quCaBrandList': list.map(x => {
							return {
								'id': x.id,
								'brName': x.brName
							}
						})
					});
				}

			}
		});
		//第二步：加载加盟商
		await api.request({
			method: "Get",
			url: "/app/league/getLeagueInfo",
			params: {},
		}).then(res => {
			console.log('resaa', res);
			if (res.code == 200) {
				var list = res.data;
				//console.log('splist', list);
				if (list.length > 0) {
					Object.assign(result, {
						'quShopList': list.map(x => {
							return {
								'id': x.id,
								'joinName': x.joinName
							}
						})
					});
				}

			}
		});

		return result;
	}

	//加载型号
	const loadProductModel = () => {
		obj.value.prModelId = null;
		obj.value.prModel = null;
		prModelList.splice(0, prModelList.length);
		if (obj.value.quTypeId != null && obj.value.quCaBrand != null) {
			uni.showLoading({
				title: '数据处理中...'
			});
			api.request({
				method: "Get",
				url: "/app/productModel/list",
				params: {
					'prType': obj.value.quTypeId,
					'prBrand': obj.value.quCaBrand
				},
			}).then(res => {
				uni.hideLoading();
				console.log('resaa', res);
				if (res.code == 200) {
					var list = res.data;
					//console.log('pmlist', list);
					if (list.length > 0) {
						prModelList.push(...list.map(x => {
							return {
								'id': x.id,
								'prBrandName': x.prBrandName
							}
						}))
					}

				}
			});
		}
	}

	onMounted(async () => {
		const query = getCurrentPages().pop().options;
		if (query.coNum) {
			obj.value.quQualityNum = query.coNum;
		}
		if (query.obj) {
			var itemObj = JSON.parse(query.obj);
			Object.assign(obj.value, itemObj);
		}
		await loadData();
	})

	const toList = () => {
		uni.redirectTo({
			url:'/guarantee/list'
		})
	}
</script>


<style>
	page{
		background-color: #F4F4F4;
	}
</style>
<style scoped>
	.submitbt {
		width: 90%;
		margin: 0 auto;
		height: 2.0em;
		line-height: 1.8em;
		font-size: 1.0em;
		background-color: #ccc;
		color: #fff;
	}


	.inputright {
		float: left;
		margin-left: 0.5em;
		min-width: calc(100% - 10em);
	}

	.inputlable {
		float: left;
		min-width: 5em;
		/*background-color: #F5F5F5;*/
		text-align: right;
	}

	.row {
		margin-left: 0.5em;
		margin-right: 0.5em;
		text-align: center;
		font-size: 1.0em;
		margin-top: 0.3em;
		overflow: hidden;
		border-bottom: 1px solid #8F8F8F;
		padding-top: 0.2em;
		padding-bottom: 0.2em;
	}

	.inputText {
		text-align: left;
		height: 2.0em;
		line-height: 2.0em;
		border: 0px;
		font-size: 0.8em;
		padding-left: 0.5em;
		padding-right: 0.5em;
		width: 100%;
	}

	.clear {
		clear: both;
	}
</style>